import React, { memo, useRef, useMemo } from 'react'
import { EndPlay } from '../../components'
import Progress from '../progress'
import Controls from '../controls'
import { useVideo } from '../../utils'
import styles from './index.module.scss'
import { useRecoilValue, useRecoilState } from 'recoil'
import { toggleControlShow, videoProps, videoPlayEnded, videoScreenFull } from '../../store'
import EventBus from '@/utils/emitter'
import Button from '@c/button'
import { goBack } from '@/utils/utils'
import { useIsolateDbClick } from '@/utils/hooks'
import { useErrorCodeValue } from '../../error-center'
import cm from 'classnames'

const Index = props => {
  const isFullScreen = useRecoilValue(videoScreenFull)
  const errorCode = useErrorCodeValue()
  const { toggleJuji, openJuji, closeJuji } = props
  const [isControlShow, setControlShow] = useRecoilState(toggleControlShow)
  const { hideProgress, hideSpeed, hideJuji, name, isLive } = useRecoilValue(videoProps)
  const [isEndEd, setEnded] = useRecoilState(videoPlayEnded)
  const { handleChangePlayState, toggleFullScreen } = useVideo()
  const timer = useRef(null)

  // 显示操作控件
  const showControl = status => {
    setControlShow(status === 'enter')
  }

  const clearTimer = () => {
    if (timer.current) {
      clearTimeout(timer.current)
      timer.current = null
    }
  }
  // 进入播放器
  const enterVideo = e => {
    if (e) {
      e.stopPropagation()
    }
    showControl('enter')
    clearTimer()
    if (!openJuji) {
      // 五秒后清除定时器
      timer.current = setTimeout(() => {
        setControlShow(false)
      }, 5000)
    }
  }
  // 离开播放器
  const leaveVideo = () => {
    if (!openJuji) {
      showControl('leave')
    }
    clearTimer()
  }
  // 进入控制层
  const enterControls = e => {
    e.stopPropagation()
    clearTimer()
  }

  // 播放结束DOM
  const isEndNode = useMemo(() => {
    const handleEnd = () => {
      handleChangePlayState()
      setEnded(false)
    }
    return isEndEd ? <EndPlay handle={handleEnd} /> : null
  }, [isEndEd])

  // 单击与双击
  const onDbClick = useIsolateDbClick([handleChangePlayState, toggleFullScreen])
  const handlePlay = e => {
    e.stopPropagation()
    if (errorCode) {
      return
    }
    closeJuji()
    enterVideo()
    onDbClick()
  }

  // 发起进度回退事件
  const prev = () => {
    EventBus.emit('prev')
  }
  //发起进度前进事件
  const next = () => {
    EventBus.emit('next')
  }

  return (
    <div className={styles['controller-container']} onMouseMove={enterVideo} onMouseLeave={leaveVideo}>
      {/* 点击暂停播放DOM层 */}
      <div className={styles['click-to-play-or-pause']} onClick={handlePlay}></div>
      {/* controls控制器DOM */}
      <div
        className={styles['progress-and-controls-wrap']}
        onMouseMove={enterControls}
        onMouseOver={e => e.stopPropagation()}
      >
        {/* 播放进度组件 */}
        {!hideProgress && isControlShow && <Progress />}
        {/* controls控制组件 */}
        <Controls hideSpeed={hideSpeed} isLive={isLive} hideJuji={hideJuji} toggleJuji={toggleJuji} name={name} />
      </div>
      {/* 结束播放组件 */}
      {isEndNode}

      {!hideSpeed && (
        <div className={isControlShow ? '' : 'hidden'}>
          <div hover="scale" className={styles.prev} onClick={prev}>
            <img loading="lazy" src="/images/prev.png" alt="快进" />
          </div>
          <div hover="scale" className={styles.next} onClick={next}>
            <img loading="lazy" src="/images/next.png" alt="快进" />
          </div>
        </div>
      )}
      {/* 返回上一页&title */}
      <div className={cm(styles.backBox, isControlShow ? 'block' : 'hidden')}>
        <div
          className={cm(styles.backToBox, {
            [styles.backToPhone]: true
          })}
        >
          <Button className={styles.backTo} onClick={goBack}>
            <img loading="lazy" src="/images/play-back.png" className="hideWhenPhone" alt="返回" />
            <img loading="lazy" src="/images/h-ar.png" className={cm(styles.imgPhone, 'hideWhenPc')} alt="返回" />
          </Button>
          {isFullScreen && (
            <span className={styles.span} onClick={goBack}>
              {name}
            </span>
          )}
          <span className={cm(styles.span, 'hideWhenPc')} onClick={goBack}>
            {name}
          </span>
        </div>
      </div>
    </div>
  )
}

export default memo(Index)
